<template>
  <nut-searchbar v-bind="props.searchProps">
    <template #leftin>
      <Search2 />
    </template>
  </nut-searchbar>
</template>

<script setup lang="ts">
import { Search2 } from "@nutui/icons-vue-taro";
import { Searchbar } from "@nutui/nutui-taro";
type PropsType = InstanceType<typeof Searchbar>["$props"];

const props = defineProps<{
  searchProps: PropsType;
}>();
</script>

<style lang="scss">
.nut-searchbar {
  background-color: unset;
  padding: 0;
  padding: 0 10px;
  overflow: hidden;
  .nut-searchbar__search-input {
    border: 2px solid #000;
    background-color: transparent;
    background-image: linear-gradient(to right, #fff, transparent);
    padding-left: 2px;

    .nut-searchbar__iptleft-search-icon {
      background: #000;
      color: #fff;
      padding: 5px 14px;
      border-radius: 20px;
      font-weight: 700;
      text {
        font-size: 13px;
      }
    }
  }
}
</style>
